<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from "vue"
import { ElMessage } from "element-plus"
import { View,Timer,Search } from '@element-plus/icons-vue'
import axios from "axios"
import XPlayerComp from "@/component/XPlayerComp.vue";
const aiNewsList = [
  {
    label: '哔哩哔哩',
    options: [
      {
        value: 'AI绘画君',
        label: 'AI绘画君',
      },
      {
        value: '产品君',
        label: '产品君',
      },
      {
        value: 'Akinokoe',
        label: 'Akinokoe',
      },
    ],
  },
  {
    label: '小红书',
    options: [
      {
        value: 'Chengdu',
        label: 'Chengdu',
      }
    ],
  },
]
let aiTypeArr = reactive(["AI绘画","3D风格女孩"])
let aiNewsType = ref('AI绘画君')
let videoUrl = ref("")
const showVideo = ref(false)
let reactiveData = reactive({newsList:[]})
const initialIndex = ref(0)
const refreshNum = ref(0)

onMounted(()=>{
    getNewsList()
})

const getNewsList = () => {
    axios.get(`https://api.xingzhige.com/API/b_search/?msg=${aiNewsType.value}&n=35`).then(({data:{code,msg,data}={}}) => {
        if(code === 0){
            reactiveData.newsList = data.filter((res) => {
                if(res.stat&&res.video&&res.owner){
                    return res
                }
            })
        } else {
            ElMessage.error(msg||'检索失败！')
        }
    
  }).finally(()=>{
  })
}
const viewVideo = ({bvid,aid}) => {
    https://api.xingzhige.com/API/b_video/?bvid=BV19F4m1K7hw&aid=1202872213
    axios.get(`https://api.xingzhige.com/API/b_video/?bvid=${bvid}&aid=${aid}`).then(({data:{code,data:{pages}={}}={}}) => {
        console.log(pages,code,'pages,code ======== ')
        if(code === 0 && pages){
            const {durl:{url}} = pages[0]
            videoUrl.value = url
            showVideo.value = true
        } else {
            ElMessage.error('数据获取失败！')
        }
    
    }).finally(()=>{
    })
}
const changeAi = (e) => {
console.log(e,'e ======== ',aiNewsType.value)
getNewsList()
}
</script>

<template>
    <div class="ai-portfolio">
        <div class="top-card">
            <span style="marginRight:10px">AI资讯集</span>
            <!-- <el-cascader v-model="aiTypeArr" @visibleChange="visibleChange" @change="changeAi" :options="aiProList" :props="aiCascard" /> -->
            <el-select v-model="aiNewsType" @change="changeAi" placeholder="选择资讯类别" style="width: 240px">
                <template #header>
                    <div class="ai-bottom-search">
                        <span style="marginRight:10px">定向检索: </span>
                        <el-input
                            v-model="aiNewsType"
                            @keyup.enter="getNewsList"
                            :suffix-icon="Search"
                            class="option-input"
                            placeholder="input option name"
                            size="small"
                        />
                    </div>
                </template>
                <el-option-group
                v-for="group in aiNewsList"
                :key="group.label"
                :label="group.label"
                >
                <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
                    
                </el-option-group>
            </el-select>
        </div>
        <div class="news-list">
            <div @click="viewVideo({bvid,aid})" v-for="({stat,video,owner,bvid,aid},index) in reactiveData.newsList" :key="bvid+'--'+aid+'----'+index" class="news-item">
                <div :style="{background:`url(${video.cover})`}" class="top-info">
                    <div class="video-info">
                        <div class="play-nums"><el-icon><View /></el-icon>{{ stat.video }}</div>
                        <div class="video-duration"><el-icon><Timer /></el-icon>{{ stat.duration }}</div>
                    </div>
                </div>
                <div class="bottom-info">
                    <div class="video-title overflowClamp2">{{ video.title }}</div>
                    <div class="author-info">
                        <div class="author-name overflowClamp1">{{ owner.name }}</div>
                        <div class="video-create-time overflowClamp1">{{ stat.time }}</div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :destroy-on-close="true" :show-close="false" v-model="showVideo" title="">
            <XPlayerComp :url="videoUrl"/>
        </el-dialog>
    </div>
</template>
<style lang="scss">
.ai-portfolio{
    .el-overlay{
        .el-overlay-dialog{
            display: flex;
            align-items: center;
            justify-content: center;
            .el-dialog{
                width: fit-content;
                padding: 0;
                margin: 0;
                border-radius: 8px;
                overflow: hidden;
                .el-dialog__header{
                    display: none;
                }
            }
        }
    }
}
</style>
<style scoped lang="scss">
.ai-bottom-search{
    display: flex;
    align-items: center;
    >span{
        display: inline-block;
        margin-right: 8px;
        white-space: nowrap;
    }

}
.ai-portfolio{
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    text-align: left;
    .top-card{
        height: 45px;
        line-height: 45px;
        display: flex;
        align-items: center;
        border-bottom: 2px solid #eee;
        margin-bottom: 2px;
        >span{
            color: #333;
            font-size: 14px;
            user-select: none;
        }
        .el-select{
            flex: 1;
        }
    }
    .news-list{
        max-height: calc(100% - 50px);
        overflow: hidden;
        overflow-y: auto;
        .news-item{
            width: calc(50% - 12px);
            display: inline-block;
            margin: 6px;
            transition: all .2s linear .2s;
            &:hover{
                cursor: pointer;
                box-shadow:
                5px 5px 5px #eee,
                5px -5px 5px #eee,
                -5px 5px 5px #eee,
                -5px -5px 5px #eee;
                .bottom-info{
                    .video-title{
                        color: #1677ff;
                    }
                }
                
                
            }
            .top-info{
                height: 126px;
                background-size: cover!important;
                background-repeat: no-repeat!important;
                position: relative;
                border: 1px solid #ccc;
                border-radius: 6px;
                overflow: hidden;
                .video-info{
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    height: 25px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    background: linear-gradient(180deg, #e2dcdc, #565151cc);
                    padding: 0 6px;
                    box-sizing: border-box;
                    >div{
                        font-size: 14px;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        >.el-icon{
                            margin-right: 3px;
                        }
                    }
                }
            }
            .bottom-info{
                .video-title{
                    font-size: 13px;
                    font-weight: 500;
                    color: #18191c;
                    min-height: 40px;
                }
                
                .author-info{

                    display: flex;
                    align-items: center;
                    color: #9499A0;
                    >div{
                        display: inline-block;
                    }
                    .author-name{
                        width: 53%;
                        font-size: 11px;
                        vertical-align: text-top;
                    }
                    .video-create-time{
                        width: 47%;
                        font-size: 10px;
                    }
                }
            }
        }
    }
}
</style>
